<template>
    <a-popup
        ref="popup"
        popPlacement="right-start"
        :popModifiers="popModifiers"
        :popShown="popShown"
        :escToClose="false"
    >
        <slot></slot>
        <template v-slot:pop>
            <slot name="pop">
                <div class="pop" :class="[dotOnly ? 'dot-only' : '']">
                    {{ dotOnly ? "" : count }}
                </div>
            </slot>
        </template>
    </a-popup>
</template>

<style lang="scss" scoped>
.pop {
    background-color: red;

    &:not(.dot-only) {
        color: white;
        min-width: 16px;
        height: 16px;
        text-align: center;
        font-size: 12px;
        padding: 0 2px;
        box-sizing: border-box;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    &.dot-only {
        width: 8px;
        height: 8px;
        border-radius: 4px;
    }
}
</style>

<script>
import APopup from './APopup.vue'
export default {
    components: { APopup },
    props: {
        /**
         * 要展示的数值，小于等于0时，整个badge会隐藏
         */
        count: {
            type: Number,
            default: null,
        },
        /**
         * 是否仅仅展示小红点，注意：仍会判断count，小于等于0时，整个badge会隐藏
         */
        dotOnly: {
            type: Boolean,
            default: false,
        },
        hiddenFunc: {
            type: Function,
            default: a => a <= 0
        }
    },
    data() {
        return {
        }
    },
    computed: {
        popShown() {
            return !this.hiddenFunc(this.count)
        },
        badgeWidth() {
            return this.dotOnly ? 8 : 16
        },
        popModifiers() {
            return [
                {
                    name: 'offset',
                    options: {
                        offset: [-this.badgeWidth / 2, -this.badgeWidth / 2],
                    }
                },
                {
                    name: 'preventOverflow',
                    options: {
                        mainAxis: false,
                        altAxis: false,
                    }
                }
            ]
        }
    },
}
</script>